
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- Flexslider  -->
	<link rel="stylesheet" href="css/flexslider.css">
	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>
	<div id="fh5co-page">
		<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
		<aside id="fh5co-aside" role="complementary" class="border js-fullheight">
			<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=879644059,1561789365&fm=111&gp=0.jpg" alt="" style="width: 150px;height: 150px;border-radius: 50%;margin-left: 40px;">
			<h1 id="fh5co-logo" style="margin-top: 10px;font-size: 20px;"><a href="index.html">北顾。</a></h1>
			<nav id="fh5co-main-menu" role="navigation">
				<ul>
					<li><a href="index.html">我</a></li>
					<li><a href="blog.html">博客</a></li>
					<li><a href="portfolio.html">作品集</a></li>
					<li class="fh5co-active"><a href="about.html">留言</a></li>
					<li><a href="contact.html">联系</a></li>
				</ul>
			</nav>

			<div class="fh5co-footer">
				<!-- <p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://www.mycodes.net/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p> -->
				<ul>
					<li><a href="#"><i class="icon-facebook2"></i></a></li>
					<li><a href="#"><i class="icon-twitter2"></i></a></li>
					<li><a href="#"><i class="icon-instagram"></i></a></li>
					<li><a href="#"><i class="icon-linkedin2"></i></a></li>
				</ul>
			</div>

		</aside>

		<!-- <div id="fh5co-main">
			<div class="fh5co-narrow-content">
				<div class="row row-bottom-padded-md">
					<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
						<img class="img-responsive" src="images/img_bg_1.jpg" alt="Free HTML5 Bootstrap Template by FreeHTML5.co">
					</div>
					<div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
						<h2 class="fh5co-heading">关于公司</h2>
						<p>远处，在“山”一词的后面，远离Vokalia和Consonantia国家，那里有盲目的文字。Quisque坐在amet efficitur nih。Interdum和malesuada产后因潮红性鼻息肉而闻名。</p>
						<p>Quisque坐在amet efficitur nih。Interdum和malesuada产后因潮红性鼻息肉而闻名。</p>
					</div>
				</div>
			</div>

			<div class="fh5co-narrow-content">
					<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">我们的服务</h2>
					<div class="row">
						<div class="col-md-6">
							<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="fh5co-icon">
									<i class="icon-settings"></i>
								</div>
								<div class="fh5co-text">
									<h3>战略</h3>
									<p>远处，在“山”一词的后面，远离Vokalia和Consonantia国家，那里有盲目的文字。 </p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="fh5co-icon">
									<i class="icon-search4"></i>
								</div>
								<div class="fh5co-text">
									<h3>探索</h3>
									<p>远处，在“山”一词的后面，远离Vokalia和Consonantia国家，那里有盲目的文字。 </p>
								</div>
							</div>
						</div>

						<div class="col-md-6">
							<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="fh5co-icon">
									<i class="icon-paperplane"></i>
								</div>
								<div class="fh5co-text">
									<h3>方向</h3>
									<p>远处，在“山”一词的后面，远离Vokalia和Consonantia国家，那里有盲目的文字。 </p>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="fh5co-feature animate-box" data-animate-effect="fadeInLeft">
								<div class="fh5co-icon">
									<i class="icon-params"></i>
								</div>
								<div class="fh5co-text">
									<h3>专长</h3>
									<p>远处，在“山”一词的后面，远离Vokalia和Consonantia国家，那里有盲目的文字。 </p>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<!-- <title>漠丶叹尘的空间</title> -->
    	<link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">
		<link rel="stylesheet" type="text/css" href="css/qqZone.css">
		<link rel="stylesheet" href="css/cd.css">
</head>
<body>
	<!-- 下面实现留言板功能 -->
	<div class="topp">

	</div>
    <div class="mainframe">
    	<div class="title">留言板</div>
    	<div class="message">主人寄语</div>
    	<div class="info">
    		这是主人留下的寄语~
    	</div>
    	<div class="content" contenteditable="true"></div>
    	<input type="button" name="submit" value="发表" class="subbtn">
    	<div class="numofmessage">留言(0)</div>
    	<!-- 下面是留言区 -->
    	<div class="msgFrame">
    	    <div class="content_1">
    	         <img class="name" src="https://img2.woyaogexing.com/2020/10/20/b9fb8e68ab9f4a30ba859396154810fc!400x400.jpeg" alt="" style="width: 50px;height: 50px;" alt="photo">
    	         <div class="mainInfo">
    		         <div class="userId"><a href="#">Sily°苏暖年</a></div>
    		         <div class="conInfo">
						   这是一条留言。
						   <div class="praise">
							<span id="praise"><img src="images/zan.png" id="praise-img" /></span>
							<span id="praise-txt">1455</span>
							<span id="add-num"><em>+1</em></span>
						</div>
    		            </div>
    		         <div class="time">2016-12-19  23:46:11</div>
    		    </div>

    	    </div>
         </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script src=""></script>
<script type="text/javascript">
	$(function(){
		$("#praise").click(function(){
			var praise_img = $("#praise-img");
			var text_box = $("#add-num");
			var praise_txt = $("#praise-txt");
			var num=parseInt(praise_txt.text());
			if(praise_img.attr("src") == ("images/yizan.png")){
				$(this).html("<img src='images/zan.png' id='praise-img' class='animation' />");
				praise_txt.removeClass("hover");
				text_box.show().html("<em class='add-animation'>-1</em>");
				$(".add-animation").removeClass("hover");
				num -=1;
				praise_txt.text(num)
			}else{
				$(this).html("<img src='images/yizan.png' id='praise-img' class='animation' />");
				praise_txt.addClass("hover");
				text_box.show().html("<em class='add-animation'>+1</em>");
				$(".add-animation").addClass("hover");
				num +=1;
				praise_txt.text(num)
			}
		});
	})
   $(".zoneName").hover(function(){
   	   $(".edit").show();
   },function(){
   	   $(".edit").delay(500).hide(0);//延时执行
   })
   //鼠标响应事件
   $(".support").mouseover(function(e){
   	   var left=e.pageX;
   	   var top=e.pageY;
   	   top=top-41;//这里是因为这个元素的父元素使用了margin-top属性，使得top值偏移了41像素。
   	   top=top+25;//加上鼠标自己的高度
   	   console.log(left+"px"+"   top:"+top)
   	   $(".tips").css({"left":left+"px","top":top+"px"});
   	   // $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
   	   // $(".tips").show("slow");
   	   $(".tips").fadeIn();
   })
   /*
    *鼠标离开事件，其中leave是指离开当前元素，而out包括其子元素
   */
   // $(".support").mouseout(function(){
   // 	   $(".tips").hide();
   // })
   $(".support").mouseleave(function(){
   	   console.log("leave");
   	   // $(".tips").css("display","none");
   	   // $(".tips").hide("slow");
   	    $(".tips").fadeOut();
   })
   //修改头像
   $(".photo").hover(function(){
   	   $(".uploadphoto").delay(800).show(0);
   },function(){
   	   $(".uploadphoto").hide();
   }) 
   $(".uploadphoto").hover(function(){
   	   if ($(this).is(":visible")) {
          console.log("visible")
   	   }
   	   else
   	   $(".uploadphoto").show();
   })
   //创建一个div
    function creatDiv(className,closeName,left,top){
          var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');     
          div.addClass(className);
          $('body').append(div);
          left+=360;
          var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>'); 
          close.addClass(closeName);
          $('body').append(close);
      }     
   $(".uploadphoto").click(function(){
   	   var className='dialog';
   	   var closeName="close";
   	   console.log("点击上传");
   	   creatDiv(className,closeName,500,200);   
   	   $(".close").bind("click",function(){
   	   	      	  $(".dialog").remove();
   	              $(".close").remove();
   	              console.log("关闭成功");
   	              $(".uploadphoto").hide();
   	   });
   })
   //下面是错误的尝试，直接绑定一个函数名称可能导致该函数直接执行！
   // $(".close").bind("click",closeDialog());
   // function closeDialog(){
   // 	  $(".dialog").remove();
   // 	  $(".close").remove();
   // 	  console.log("关闭");
   // }


   //接下来使用数据库储存留言数据
   var count=0;
   $(".subbtn").click(function(){
   	 var text= $(".content").text();
   	 var time=getCurrentTime();
   	 if(text==""){
   	 	alert("您还没有输入任何内容！");
   	 }
   	 else{
   	 	loadmessage(text,'Sily°苏暖年',time);
   	 	count++;
   	 	console.log('success!');
   	 	$(".content").text("");
   	 	$(".numofmessage").text("留言("+count+")");
   	 }
   })
   function loadmessage(message,id,time){
      	//创建content_index
      	//包含img.name + mainInfo
      	//.userId .conInfo .time
      	var contentDiv='<div class="content_1">';
      	   contentDiv+='<img class="name" src="https://img2.woyaogexing.com/2020/10/20/b9fb8e68ab9f4a30ba859396154810fc!400x400.jpeg" alt="photo">';
      	   contentDiv+='<div class="mainInfo">'
      	   contentDiv+=' <div class="userId"><a href="#">';
      	   contentDiv+=id;
      	   contentDiv+='</a></div> <div class="conInfo">';
      	   contentDiv+=message;
      	   contentDiv+='</div> <div class="time">';
		   contentDiv+=time;
		   contentDiv+='<div class="praise"></div>'
      	   contentDiv+='</div> </div> </div>'
           $(".msgFrame").prepend(contentDiv);
   }
   function getCurrentTime(){
   	   var today=new Date();
   	   var y=today.getFullYear();
   	   var mh=today.getMonth();
   	   mh++;
   	   var d=today.getDate();
   	   var h=today.getHours();
   	   var m=today.getMinutes();
   	   var s=today.getSeconds();
   	   m=checkTime(m)
       s=checkTime(s)
       var time=y+"-"+mh+"-"+d+"  "+h+":"+m+":"+s;
       return time;
   }
   function checkTime(i){
       if(i<10)
         i="0"+i
       return i
    }

</script>
</html>
		
			<!-- <div class="fh5co-narrow-content">
				<div class="row">
					<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
						<h1 class="fh5co-heading-colored">保持联系</h1>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
						<p class="fh5co-lead">他们分开居住在语义大国语义海的Bookmarksgrove。</p>
							<p><a href="#" class="btn btn-primary">学到更多</a></p>
					</div>
					
				</div>
			</div>
		</div>
	</div> -->

	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Flexslider -->
	<script src="js/jquery.flexslider-min.js"></script>
	
	
	<!-- MAIN JS -->
	<script src="js/main.js"></script>

	</body>
</html>

